import { Sidebar } from './Sidebar'
import { UserAvatar } from './UserAvatar'
import { useAuth } from '@/contexts/AuthContext'

interface DashboardLayoutProps {
  children: React.ReactNode
}

export function DashboardLayout({ children }: DashboardLayoutProps) {
  const { user } = useAuth()

  return (
    <div className="h-screen bg-gray-50 dark:bg-gray-900 flex flex-col">
      {/* 顶部Header - 横跨整个页面 */}
      <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 h-16 flex-shrink-0">
        <div className="flex items-center justify-between px-12 py-3 h-full">
          {/* 左侧Logo */}
          <div className="flex items-center">
            <img 
              src="/images/huibanhao.png" 
              alt="惠办好" 
              className="h-10 w-auto"
            />
          </div>
          
          {/* 右侧用户信息 */}
          <div className="flex items-center space-x-4">
            {user && (
              <div className="flex items-center space-x-3">
                <span className="text-sm text-gray-700 dark:text-gray-300 hidden sm:block">
                  {user.name}
                </span>
                <UserAvatar />
              </div>
            )}
          </div>
        </div>
      </header>

      {/* 下方内容区域 */}
      <div className="flex flex-1 overflow-hidden">
        {/* 左侧导航栏 */}
        <Sidebar />
        
        {/* 右侧主要内容区域 */}
        <main className="flex-1 overflow-y-auto bg-gray-50 dark:bg-gray-900">
          <div className="p-6">
            {children}
          </div>
        </main>
      </div>
    </div>
  )
}
